<template>
<!-- 保单录入模块-投保书流水号 -->
    <div class="fillcontain">
        <el-form :model="searchParams" ref="ruleForm" label-width="100px" class="search_container">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="受理号码" prop="applnum">
                        <el-input v-model="searchParams.applnum" placeholder="受理号码" maxlength="7" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="保单号码" prop="euchdrnum">
                        <el-input v-model="searchParams.euchdrnum" placeholder="保单号码" maxlength="8" clearable></el-input>
                    </el-form-item>
                </el-col>
                 <el-col :span="6">
                    <el-form-item label="投保书流水号" prop="chdrnum">
                        <el-input v-model="searchParams.chdrnum" placeholder="投保书流水号" maxlength="8" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6" class="text_center">
                    <el-button type="primary" icon="el-icon-search" @click="searchData"></el-button>
                    <el-button type="primary" plain  icon="el-icon-refresh" @click="resetSearch"></el-button>
                </el-col>
            </el-row>
        </el-form>
        <div class="contain">
          <div class="table_container mt20">
            <el-table
                 v-loading="loading"
                 :data="tableData"
                 highlight-current-row
                 header-cell-class-name="table-header-class"
                 style="width:100%">
                <el-table-column
                width="220"
                    property="casenum"
                    label="受理号码"
                    align='center'
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    width="220"
                   property="srcebus"
                   label="销售渠道"
                   align='center'
                   show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                 width="220"
                   property="invoiceno"
                   label="预收款收据号码"
                   align='center'
                   show-overflow-tooltip>
                </el-table-column>
                 <el-table-column
                 width="220"
                   property="chdrnum"
                   label="投保书流水号"
                   align='center'
                   show-overflow-tooltip>
                </el-table-column> 
                <el-table-column
                   label="操作"
                   align='center'
                   show-overflow-tooltip>
                   <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" circle @click="showDiag(scope.row)"></el-button>
                    </template>
                </el-table-column> 
            </el-table>
           <!-- <el-row>
                <el-col :span="24">
                    <div class="pagination">
                        <el-pagination
                            background
                            v-if='paginations.total > 0'
                            :page-sizes="paginations.pageSizes"
                            :page-size="paginations.pageSize"
                            :layout="paginations.layout"
                            :total="paginations.total"
                            :current-page='paginations.pageIndex'
                            @current-change='handleCurrentChange'
                            @size-change='handleSizeChange'>
                        </el-pagination>
                    </div>
                </el-col>
            </el-row> -->
          </div>
        </div>

        <!-- 投保书流水号修改 -->
        <el-dialog
        title="投保书流水号修改"
        :visible.sync="dialogVisible"
        width="30%"
        center
        >
        <el-row class="serial-num-pop baseInfo">
            <el-col :span="24" class="mb10">
                <el-col :span="8">
                原投保书流水号
                </el-col>
                <el-col :span="14">
                    <el-input disabled v-model="saveData.chdrnum" placeholder="原投保书流水号"></el-input>
                </el-col>
            </el-col>
            <el-col :span="24">
                <el-col :span="8">
                新投保书流水号
                </el-col>
                <el-col :span="14">
                    <el-input v-model="saveData.chdrnumNew" maxlength='8' placeholder="新投保书流水号"></el-input>
                </el-col>
            </el-col>
        </el-row>  
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateData">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
    import { mapState, mapGetters } from 'vuex'
    import constant from '@/utils/constant';
    import * as api from "@/api/policyRecord/nodeMod/seriaNum.js";
    import {isCntainChinese,isSpecialCharacters,isNotAllNumber} from '@/api/refund/RefundCommon';
    export default {
        data(){
            return {
                dialogVisible: false,
                chdrnum: '', // 原投保书流水号
                chdrnumNew: '', // 新投保书流水号
                invoiceno: '',
                searchParams:{
                    applnum:'', // 受理号码
                    euchdrnum:'', // 投保号码
                    chdrnum: '', // 投保书流水号
                },
                saveData: {
                    invoiceno: '',
                    chdrnum: '',
                    chdrnumNew: '',
                },
                tableData: [],
                loading:false,
              //需要给分页组件传的信息
                paginations: {
                    total: 0,        // 总数
                    pageIndex: 1,  // 当前位于哪页
                    pageSize: 10,   // 1页显示多少条
                    pageSizes: [5, 10, 15, 20],  //每页显示多少条
                    layout: "total, sizes, prev, pager, next, jumper"   // 翻页属性
                },
            }
        },
        methods: {
            // 重置
            resetSearch(){
                this.searchParams.applnum = '';
                this.searchParams.euchdrnum = '';
                this.searchParams.chdrnum = '';
            },
            // 查询列表
            searchData(){
                if(this.searchParams.applnum && isNotAllNumber(this.searchParams.applnum)) {
                    this.$message.error("请正确输入受理号！");
					return;
                }
                if(this.searchParams.euchdrnum && isNotAllNumber(this.searchParams.euchdrnum)) {
                    this.$message.error("请正确输入保单号！");
					return;
                }
                // if(this.searchParams.chdrnum && isCntainChinese(this.searchParams.chdrnum)) {
                //     this.$message.error("请正确输入投保书流水号！");
				// 	return;
                // }

                this.$store.dispatch('loading/CHANGE_LOADING',true)
                api.queryAfiapfVO(this.searchParams).then(res => {
                    this.$store.dispatch('loading/CHANGE_LOADING',false)
                    if(res.resultCode == constant.SUCCESS && res.data){
                        this.tableData = res.data;
                    }
                }).catch(err =>{
                    this.$store.dispatch('loading/CHANGE_LOADING',false);
                })
            },
            updateData() {
                // if(this.saveData.chdrnum && isNotAllNumber(this.saveData.chdrnum)) {
                //     this.$message.error("请输入正确的原投保书流水号！");
				// 	return;
                // }
                if(!this.saveData.chdrnumNew || isNotAllNumber(this.saveData.chdrnumNew)) {
                    this.$message.error("请输入正确的新投保书流水号！");
					return;
                }

                if(this.saveData.chdrnumNew.length>8){
                    this.$message.error("投保书流水号长度不能超过8位！");
                    return;
                }

                this.$store.dispatch('loading/CHANGE_LOADING',true)
                api.updateAfiapf(this.saveData).then(res => {
                    this.$store.dispatch('loading/CHANGE_LOADING',false)
                    let message = "";
                    let type = "";
                    if(res.resultCode == constant.SUCCESS){
                        message = '修改成功！';
                        type = "success";
                        this.dialogVisible = false; 
                        this.searchData();
                    } else {
                        message = "修改失败！";
                        type = "error";
                    }
                    this.$message({
                        message: message,
                        type: type
                    });
                }).catch(err =>{
                    this.$store.dispatch('loading/CHANGE_LOADING',false);
                })
            },
            // 每页多少条切换
            handleSizeChange(pageSize) {
               this.paginations.pageSize = pageSize;
            },
            // 上下分页
            handleCurrentChange(page) {
               this.paginations.pageIndex = page;
            },
            // 显示弹框
            showDiag(row){
                console.log(row);
                this.saveData = {
                    invoiceno: '',
                    chdrnum: '',
                    chdrnumNew: '',
                };
                this.saveData.invoiceno = row.invoiceno;
                this.saveData.chdrnum = row.chdrnum;
                this.saveData.chdrnumNew = '';
                this.dialogVisible = true;
            }
        },
        computed:{
            ...mapGetters(['tags']),
            reload(){
                return this.$store.state.loading.reload;
            }
        },
        activated(){
            if(this.reload){
                this.$store.dispatch('loading/CHNAGE_RELOAD',false)
                Object.assign(this.$data, this.$options.data());
            }
        }
    }
</script>

<style lang="less" scoped>
    .fillcontain{
        padding-bottom: 0;
    }
    .contain{
        background: #fff;
        padding: 10px;
        margin-bottom: 20px;
    }
   .pagination{
       padding: 10px 20px;
       text-align: right;
   }
   .operationIcon{
        // padding: 12px;
        border:1px solid #e5e5e5;
        border-radius: 50%;
        width: 22px; 
        height: 22px;
        display: inline-block;
        cursor: pointer;
        box-shadow:0 0 3px #f9f9f9;
        .svg-icon{
            font-size: 14px;
            fill:#68a3fc;
        }
   }
   .search_container{
       padding: 20px 20px 0 20px;
       border-top: 1px solid #e1e1e1;
   }
</style>



